<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #all{
      width: 100%;
      height: auto;
    }
    #care{
      width: 100%;
      background-color: #aaa;
      padding-top: 50px;
      padding-bottom: 50px;
    }
    #dating{
      width: auto;
      height: 500px;
      border: #4E546D 5px double;
      padding-left: 5%;
      padding-right: 5%;
      padding-top: 25px;
      padding-bottom: 25px;
    }
    .room{
      width: 200px;
      height: 100px;
      border: 2px solid black;
      margin-top: 50px;
      margin-bottom: 50px;
      margin-right: 5%;
      margin-left: 5%;
      border-radius: 10px;
      float: left;

    }
    .room_i{
      margin-top: 25px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .room_i_l{
      border: 1px solid black ;
      width: 50px;
      height: 50px;
      float: left;
    }
    .room_i_r{
      border: 1px solid black ;
      width: 50px;
      height: 50px;
      float: right;
    }
    .room_m{
      text-align: center;
      line-height: 50px;
      margin-left: 12%;
      height: 50px;
      float: left;
    }
    .room_m_t{
      font-size: 10px;
      border: 2px orangered solid;
      border-radius: 5px;
      background-color: orangered;
      color: aliceblue;
      cursor: pointer;
      width: 30px;
      height: 20px;
    }
    .jz:hover{
      cursor: not-allowed;
    }

  </style>
</head>
<body>
<div id="all">
  <input type="hidden" id="user_id" th:value="${user.user_id}">
  <div id="care">
    <div id="dating">

      <div class="room">
        <div class="room_i">
          <img id="z_l0" class="room_i_l"  src="./img/user_tx.png">
        </div>
        <div class="room_m">
          <span id="z_m0" class="room_m_t" stats="0" num="0" onclick="z_click(this)">加入</span>
        </div>
        <div class="room_i">
          <img id="z_r0" class="room_i_r" src="./img/user_tx.png">
        </div>
      </div>

      <div class="room">
        <div class="room_i">
          <img id="z_l1" class="room_i_l" src="./img/user_tx.png">
        </div>
        <div class="room_m">
          <span id="z_m1" class="room_m_t" stats="0" num="1" onclick="z_click(this)">加入</span>
        </div>
        <div class="room_i">
          <img id="z_r1" class="room_i_r" src="./img/user_tx.png">
        </div>
      </div>

    </div>
  </div>
</div>

<script src="./layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js" charset="GBK"></script>
<script type="text/javascript" src="js/jquery.jmpopups.js"></script>
<script th:inline="javascript">

</script>
<script type="text/javascript">
  setInterval(function(){find();},1000);
  //指定1秒刷新一次
  $(function() {
    init();
  })

  function init() {
    find();
    var dating = $("#dating");
    dating.click(function() {
      var s = "-2";
      var n = "0";
      if(s=="0"||s=="-2"){
        $.ajax({
          type:"post",//请求类型
          url:"joinDTList",//请求地址
          dataType:"json",//交互的数据类型
          data:{
            "n":n,
            "s":s
          },
          cache:false,//去除请求的缓存
          success:function(){
            find();
          }
        });
      }
    })

    $(".room").click(function(event) {
      event.stopPropagation();
    });
  }

  function find(){
    var user_id = $("#user_id").val();
    $.ajax({
      type:"post",//请求类型
      url:"findDTList",//请求地址
      dataType:"text",//交互的数据类型
      cache:false,//去除请求的缓存
      success:function(msg){
        var result = $.parseJSON(msg);
        for(var i=0;i<result.length; i++){
          var map = result[i];
          var user1 = map["user1"];
          var user2 = map["user2"];
          var seed = map["seed"];
          if (seed==null){
            seed = 1;
          }
          if(user1!=null){
            var user1_img = user1.user_img_path + user1.user_img_name;
            if($("#z_l"+i).attr('src')!=user1_img){
              $("#z_l"+i).attr('src',user1_img);
            }
          }else{
            if($("#z_l"+i).attr('src')!='./img/user_tx.png'){
              $("#z_l"+i).attr('src','./img/user_tx.png');
            }
          }
          if (user2!=null) {
            var user2_img = user2.user_img_path + user2.user_img_name;
            if($("#z_r"+i).attr('src')!=user2_img){
              $("#z_r"+i).attr('src',user2_img);
            }
          }else{
            if($("#z_r"+i).attr('src')!='./img/user_tx.png'){
              $("#z_r"+i).attr('src','./img/user_tx.png');
            }
          }
          if(user1!=null && user2!=null){
            var user1_id = user1.user_id;
            var user2_id = user2.user_id;
            if(user1_id != user_id && user2_id != user_id){
              if($("#z_m"+i).attr("stats")!="-1"){
                $("#z_m"+i).text("已满");
                $("#z_m"+i).attr("stats",seed);
                $("#z_m"+i).addClass("jz");
              }
            }else{
              if($("#z_m"+i).attr("stats")!=seed){
                $("#z_m"+i).text("开始");
                $("#z_m"+i).attr("stats",seed);
                $("#z_m"+i).removeClass("jz");
              }
            }
          }else{
            if(user1!=null){
              var user1_id = user1.user_id;
              if(user1_id!=user_id){
                if($("#z_m"+i).attr("stats")!="0"){
                  $("#z_m"+i).text("加入");
                  $("#z_m"+i).attr("stats","0");
                  $("#z_m"+i).removeClass("jz");
                }
              }else{
                if($("#z_m"+i).attr("stats")!="-2"){
                  $("#z_m"+i).text("离开");
                  $("#z_m"+i).attr("stats","-2");
                  $("#z_m"+i).removeClass("jz");
                }
              }
            }else if(user2!=null){
              var user2_id = user2.user_id;
              if(user2_id!=user_id){
                if($("#z_m"+i).attr("stats")!="0"){
                  $("#z_m"+i).text("加入");
                  $("#z_m"+i).attr("stats","0");
                  $("#z_m"+i).removeClass("jz");
                }
              }else{
                if($("#z_m"+i).attr("stats")!="-2"){
                  $("#z_m"+i).text("离开");
                  $("#z_m"+i).attr("stats","-2");
                  $("#z_m"+i).removeClass("jz");
                }
              }
            }else{
              if($("#z_m"+i).attr("stats")!="0"){
                $("#z_m"+i).text("加入");
                $("#z_m"+i).attr("stats","0");
                $("#z_m"+i).removeClass("jz");
              }
            }
          }
        }
      }
    });
  }
  function z_click(e){
    var s = $(e).attr("stats");
    var n = $(e).attr("num");
    if(s=="0"||s=="-2"){
      $.ajax({
        type:"post",//请求类型
        url:"joinDTList",//请求地址
        dataType:"json",//交互的数据类型
        data:{
          "n":n,
          "s":s
        },
        cache:false,//去除请求的缓存
        success:function(){
          find();
        }
      });
    }else if(s=="1"){
      $.ajax({
        type:"post",//请求类型
        url:"createSr",//请求地址
        dataType:"text",//交互的数据类型
        data:{
          "n":n
        },
        cache:false,//去除请求的缓存
        success:function(msg){
          var seed = msg;
          location.href = "gosrWuZiQi?seed="+seed+"&n="+n;
        }
      });
    }else{
      location.href = "gosrWuZiQi?seed="+s+"&n="+n;
    }
  }
</script>
</body>
</html>